<template>
  <div class="left-sidebar">
    <div class="sidebar-header" v-if="title">
      <div class="header-title">{{ title }}</div>
    </div>
    
    <div class="sidebar-content">
      <div 
        class="sidebar-item" 
        v-for="item in menuItems" 
        :key="item.id"
        :class="{ active: isActive(item) }"
        @click="handleItemClick(item)"
      >
        <div class="item-icon" v-if="item.icon">{{ item.icon }}</div>
        <div class="item-text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {  } from 'vue';
import { useRouter, useRoute } from 'vue-router';

// 定义组件属性
const props = defineProps({
  // 菜单项数组
  menuItems: {
    type: Array,
    required: true,
    // 每个菜单项应该包含：id, text, path(路由路径), icon(可选)
  },
  // 标题（可选）
  title: {
    type: String,
    default: ''
  },
  // 是否使用路由进行导航（如果为false，则只触发事件不进行路由跳转）
  useRouting: {
    type: Boolean,
    default: true
  }
});

// 定义事件
const emit = defineEmits(['item-click']);

// 获取路由实例和当前路由
const router = useRouter();
const route = useRoute();

// 判断菜单项是否激活
const isActive = (item) => {
  if (props.useRouting && item.path) {
    // 如果使用路由，则根据路径判断是否激活
    return route.path === item.path || route.path.startsWith(item.path + '/');
  } else {
    // 如果不使用路由，则根据自定义激活状态判断
    return item.active === true;
  }
};

// 处理菜单项点击
const handleItemClick = (item) => {
  // 触发点击事件
  emit('item-click', item);
  
  // 如果配置了使用路由且菜单项有路径，则进行路由跳转
  if (props.useRouting && item.path) {
    router.push(item.path);
  }
};
</script>

<style scoped lang="scss">
.left-sidebar {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-right: 1px solid #eee;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
  .sidebar-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    
    .header-title {
      font-size: 16px;
      font-weight: bold;
      color: #e1251b;
    }
  }
  
  .sidebar-content {
    flex: 1;
    padding: 10px 0;
    
    .sidebar-item {
      display: flex;
      align-items: center;
      padding: 12px 20px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
      
      .item-icon {
        margin-right: 10px;
        font-size: 16px;
      }
      
      &:hover {
        color: #e1251b;
        background-color: #f5f5f5;
      }
      
      &.active {
        color: #e1251b;
        background-color: #f1f1f1;
        font-weight: 500;
      }
    }
  }
}
</style>
